<template>
	<div class="cate-select" v-clickoutside="outsideClose">
		
		<el-input 
			ref="cateSelect" 
			:value="selectText" 
			placeholder="请选择类别" 
			@focus="cateSelectFocus"
			readonly
		></el-input>

		<div  v-show="dropDownVisible" ref="cateSelectDropDown" class="cate-select-drop-down">
			<el-input
				class="drop-down-input"
		  		placeholder="输入关键字进行过滤"
		  		v-model="filterText">
			</el-input>

			<div class="tree-wrap" style="height: 200px;">
				<el-scrollbar style="height: 100%;">

					<el-tree
						v-if="data.length>0"
					  	class="filter-tree"
					  	:data.sync="data"
					  	:props="props"
					  	default-expand-all
              			:node-key="nodeKey"
					  	:expand-on-click-node="expandOnClickNode"
					  	:filter-node-method="filterNode"
              			:current-node-key="selectId"
					  	@node-click="treeNodeClick"
					  	ref="inputTree">
					</el-tree>

				</el-scrollbar>
			</div>
		</div>

	</div>
</template>

<script>
export default{
	props:{
		value:{
			type:[Number,String],
			default:0
		},
    	name:{
      		type:String,
      		default:''
    	},
		data:{
			type:Array,
			default:function(){
        		return [];
      		}
		},
    	props:{
      		type:Object,
      		default:()=>{
        		return new Object();
      		}
    	},
    	nodeKey:{
      		type:String,
      		default:'id'
    	},
    	nodeName:{
      		type:String,
      		default:'name'
    	},
    	//是否在点击节点时展开或者收缩节点，如果是false，则只有点击箭头图标才会
    	expandOnClickNode:{
      		type:Boolean,
      		default:false,
    	}
	},
	data(){
		return{
			selectId:'',
			selectText:'',
			dropDownVisible:false,
			filterText: ''
		}
	},
	watch: {
      	filterText(val) {
        	this.$refs.inputTree.filter(val);
      	},
      	data(val){
        
      	},
      	value(newVal,oldVal){
      		this.selectId = newVal;
      	},
      	name(val){
        	this.selectText = val;
      	}

    },
    mounted(){
      	this.selectId = this.value;
      	this.selectText = this.name;
    },
    methods: {
      	filterNode(value, data) {
        	if (!value) return true;

        
        	console.log(this.nodeName)
        	return data[this.nodeName].indexOf(value) !== -1;
      	},
      	cateSelectFocus(){
      		this.dropDownVisible = true
      	},
      	treeNodeClick(data,node,$node){
        	//console.log("-----已选项目-------")
      		//console.log(data)
      		//console.log(node)
      		//console.log($node)
      		if(data.parentId == -1) return;
        	this.selectText = data[this.nodeName];
        	this.selectId = data[this.nodeKey];

        	this.outsideClose();
        	this.$emit("selected",data);
      	},
      	outsideClose(){
      		this.dropDownVisible = false;
      	}
    },
    directives:{
    	clickoutside:{
    		bind(el,binding,vnode){
    			function documentHandler(e){
    				if(el.contains(e.target)){
    					return false
    				}
    				if(binding.expression){
    					binding.value(e)
    				}
    			}

    			function keyUp(e){
    				if(e.keyCode == 27){
    					if(binding.expression){
    						binding.value(e)
    					}
    				}
    			}

    			el.__vueClickOutSize__ = documentHandler
    			el.__vueKeyup__ = keyUp

    			document.addEventListener('keyup', keyUp)
          		document.addEventListener('click', documentHandler)
    		},
    		unbind(el, binding) {
          		document.removeEventListener('click', el.__vueClickOutSize__)
          		delete  el.__vueClickOutSize__

          		document.removeEventListener('keyup', el.__vueKeyup__)
          		delete  el.__vueKeyup__
        	}
    	}
    }
}
</script>


<style>
.tree-wrap .el-scrollbar__wrap{
  	overflow-x: hidden;
}	

</style>


<style scoped>
.select-tree{
	position: relative;

}	

.cate-select-drop-down{
	padding: 4px;
	position: absolute;
	width: 100%;
	z-index: 999;
	left: 0;
	margin-top: 5px;
	background-color: #FFFFFF;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.drop-down-input{
	margin-bottom: 5px;
}
</style>